<template>
  <div>
    <header class="navbar">
      <div class="logo">E特尔诺</div>
      <nav>
        <ul>
          <li><a href="#product">产品</a></li>
          <li><a href="#lab">实验室</a></li>
          <li><a href="#about">关于我们</a></li>
        </ul>
      </nav>
    </header>

    <main class="content">
      <div class="typing-container" id="typing">
        <span v-for="(char, index) in currentText" :key="index" class="highlight">
          {{ char }}
        </span>
        <div class="cursor" v-if="currentText.length < texts[textIndex].length"></div> 
      </div>

      <!-- 可以在这里添加其他可扩展的内容 -->
      <div class="additional-content">
        <!-- 其他内容示例 -->
        <p>这里可以添加其他内容，例如产品介绍等。</p>
      </div>
    </main>

    <footer class="footer">
      <p>&copy; 2023 E特尔诺信息门户网站. 版权所有.</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ["你好，欢迎来到E特尔诺信息门户网站！"], 
      textIndex: 0,
      charIndex: 0,
      currentText: '',
    };
  },
  methods: {
    type() {
      if (this.charIndex < this.texts[this.textIndex].length) {
        this.currentText += this.texts[this.textIndex].charAt(this.charIndex);
        this.charIndex++;
        setTimeout(this.type, 200);
      } else {
        setTimeout(this.remove, 1000);
      }
    },
    remove() {
      if (this.charIndex > 0) {
        this.currentText = this.texts[this.textIndex].slice(0, this.charIndex - 1);
        this.charIndex--;
        setTimeout(this.remove, 100);
      } else {
        this.textIndex = (this.textIndex + 1) % this.texts.length;
        setTimeout(this.type, 1000);
      }
    },
  },
  mounted() {
    this.type();
  },
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  background-color: #282c34;
  color: #61dafb;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保页面100%高度 */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.navbar {
  background-color: #212529;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  position: fixed; /* 固定在顶部 */
  width: 100%; /* 使其占满全宽 */
  z-index: 10;
}

.logo {
  font-size: 24px;
  color: #ffcc00; /* Logo颜色 */
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px; /* 选项间距 */
}

nav a {
  color: #61dafb; /* 导航文字颜色 */
  text-decoration: none; /* 去掉下划线 */
}

.content {
  margin-top: 70px; /* 导航栏的高度 */
  flex-grow: 1; /* 使内容区域可以自适应高度 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 居中对齐 */
  justify-content: center; /* 居中对齐 */
}

.typing-container {
  display: flex;
  align-items: center;
  border-right: 2px solid #61dafb; /* 光标样式 */
  padding-right: 5px; /* 文字与光标之间的距离 */
}

.highlight {
  color: #ffcc00; /* 高亮文字颜色 */
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.7), 0 0 20px rgba(255, 204, 0, 0.5); /* 发光效果 */
}

.cursor {
  width: 2px;
  height: 24px;
  background-color: #61dafb; /* 光标颜色 */
  animation: blink 0.75s step-end infinite; /* 光标闪烁效果 */
}

@keyframes blink {
  50% {
    background-color: transparent; /* 光标闪烁效果 */
  }
}

.additional-content {
  margin-top: 20px; /* 与打字效果之间的间距 */
  color: #61dafb;
  text-align: center;
}

.footer {
  text-align: center;
  color: #61dafb;
  margin-top: 20px; /* 与内容区域间的间距 */
}

footer p {
  margin: 0;
}
</style>
